import React from "react";
import "./index.less";
import { lineQuoteTypes } from "@/constants/types";

const XlChannelCardList = ({list, value, onChange}: {list:  lineQuoteTypes [], value?: string, onChange?: any}) => {

  const isChecked = (lineQuote: lineQuoteTypes) => lineQuote.id === value;

  const handleSelected = (lineQuote: lineQuoteTypes) => {
    if (value === lineQuote.id) {
      onChange(null);
    } else {
      onChange(lineQuote.id);
    }
  }

  return (
    <div className="channel-list">
      {
        list.map((v: lineQuoteTypes) => {
          return (
            <div key={v.id} className={isChecked(v) ? 'channel-card checked' : 'channel-card'} onClick={() => handleSelected(v)}>
              <div className="title">{v.cwhName}</div>
              <div className="sub-title">{v.sportName} —— {v.dportName}   {v.deliveryMethod}</div>
              <div className="desc">{v?.shipNames ? v?.shipNames.split(',')?.[0] : ''} {v?.batchTime} {v?.referenceTimeliness}自然日</div>
              <div className="ship-date">开船时间: {v?.shipTime}</div>
              {
                v?.failTimeliness && (
                  <div className="footer">
                    <div className="slow-tag">慢必赔</div>
                    <div className="txt">超过{v.failTimeliness}天按{v.lowestKgsPrice}/KG或{v.lowestCbmPrice}/CBM计算</div>
                  </div>
                )
              }
            </div>
          );
        })
      }
    </div>
  );
}
export default XlChannelCardList;